<!-- 预支付列表 -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="司机名称">
                <el-input v-model="formInline.driver_name" placeholder="请输入司机名称"></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
                <el-input v-model="formInline.company_name" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="支付状态">
                <el-select v-model="formInline.status" @change="changeStatusSelect" placeholder="选择支付状态">
                    <el-option :value="-1" label="全部"></el-option>
                    <el-option :value="0" label="未支付"></el-option>
                    <el-option :value="1" label="支付成功"></el-option>
                    <el-option :value="2" label="支付失败"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="申请时间">
                <el-date-picker v-model="pickerDateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd"
                    @change="(data) => changeDatePicker(data, 'goods')"></el-date-picker>
            </el-form-item>
        </CustomForm>

        <el-table :data="list" style="width: 100%" height="620" v-loading="tableloading">
            <el-table-column prop="add_id" label="运单ID" width="110" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="yund_id" label="分运单ID" width="110" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="apply_money" width="120" label="预支付金额(元)" align="center"
                :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="color: #DC143C;">{{ scope.row.apply_money }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="commission" width="100" label="手续费(元)" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="color: blue;">{{ scope.row.commission }}</span>
                </template>
            </el-table-column>
            <el-table-column label="实际支付金额(元)" width="140" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="color: #c00;">{{ minusRealMoney(scope.row.apply_money,
                        scope.row.commission)
                        }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="add_time" label="申请时间" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="confirm_time" label="确认支付时间" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.confirm_time == '1970-01-01 08:00:00'">暂无</span>
                    <span v-else>{{ scope.row.confirm_time }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="driver_name" label="司机姓名" width="100" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="driver_car" label="车辆信息" align="center" :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column prop="company_name" label="公司名称" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="name" label="支付状态" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 0" style="color:chocolate">未支付</span>
                    <span v-else-if="scope.row.status == 1" style="color:green">支付成功</span>
                    <span v-else-if="scope.row.status == 2" style="color:red">支付失败</span>
                </template>
            </el-table-column>
        </el-table>


        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="formInline.page" :page-sizes="[10, 20, 30, 50, 70, 80, 100]"
            :page-size="formInline.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import Big from "big.js";
import { advancePaymentList } from "@/api/moneyManagment"
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            formInline: {
                driver_name: "",
                status: -1,
                time: '',
                company_name: "",
                page: 1,
                pageSize: 10
            },
            list: [],
            tableloading: false,
            pickerDateArr: "",
            total: 0,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async advancePaymentList() {
            let res = await advancePaymentList(this.formInline)
            if (res.code == 200) {
                this.list = res.data ? res.data.data : [];
                this.total = res.data ? res.data.total : 0;
            }
        },
        changeDatePicker(data) {
            this.formInline.time = data.join(' - ');
        },
        onSubmit() {
            this.formInline.page = 1;
            this.advancePaymentList();
        },
        resetTable() {
            this.formInline = {
                driver_name: "",
                status: -1,
                time: '',
                company_name: "",
            };
            this.pickerDateArr = '';
            this.advancePaymentList();
        },
        handleSizeChange(pageSzie) {
            this.formInline.pageSize = pageSzie;
            this.formInline.page = 1;
            this.advancePaymentList();
        },
        handleCurrentChange(page) {
            this.formInline.page = page;
            this.advancePaymentList();
        },
        changeStatusSelect() {
            this.advancePaymentList();
        },
        minusRealMoney(a, b) {
            let prePayMoney = new Big(a);
            let otherMoney = new Big(b);
            return prePayMoney.minus(otherMoney).toString();
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.advancePaymentList();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

::v-deep .el-table {
    margin-top: 60px;
}

::v-deep .el-pagination {
    margin-top: 20px;
}
</style>